<!-- 居家医学观察 -->
<template>
    <div class="container-box">
        <div class="title">
            <span @click="temperatureTest">体温测试</span>
            <span @click="nucleinTest">核酸检测登记</span>
        </div>
        <el-table :data="temperatureData" style="width: 90%;align-items: center;justify-content: center;" border
            v-show="table1">
            <el-table-column type="index" label="序号" min-width="15%" />
            <el-table-column prop="date" label="日期" min-width="15%" />
            <el-table-column prop="temperature" label="体温(°)" min-width="15%" />
        </el-table>
        <el-table :data="nucleinData" style="width: 90%;align-items: center;justify-content: center;" border
            v-show="table2">
            <el-table-column type="index" label="序号" min-width="15%" />
            <el-table-column prop="samplingDate" label="采样日期" min-width="15%" />
            <el-table-column prop="company" label="送检单位" min-width="15%" />
            <el-table-column prop="serum" label="是否咽拭子" min-width="15%" />
            <el-table-column prop="throatSwabs" label="是否血清" min-width="15%" />
            <el-table-column prop="testDate" label="送检日期" min-width="16%" />
            <el-table-column prop="result" label="检验结果" min-width="15%" />
        </el-table>
        <div class="img">
            <img src="./pub.svg" alt="">
            <span class="text">居家监测中</span>
        </div>
    </div>
    <div class="exit" @click="exit">
        <el-button>返回</el-button>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from '@/util/http'
export default defineComponent({
    name: 'DetailHomeMedicine',
    setup() {
        const router = useRouter();
        const route = useRoute()

        const state = reactive({
            temperatureData: [] as any,
            nucleinData: [] as any
        })


        //跳转
        const table1 = ref(true)
        const table2 = ref(false)
        // 体温测试
        const temperatureTest = () => {
            table1.value = true
            table2.value = false
        }
        // 核酸检测
        const nucleinTest = () => {
            table1.value = false
            table2.value = true
        }

        // 返回
        const exit = () => {
            router.push('/ManagementOfConfidentialPersonnel')
        }

        onBeforeMount(async () => {
            // 当前id
            let id = route.query.id
            // 体温
            await axios({
                method: "get",
                url: "dailyAgent/FindTemperature",
                params: {
                    id: id
                }
            }).then((res) => {
                state.temperatureData = res.data.data
            })
            // 核酸监测
            await axios({
                method: "get", 
                url: "dailyAgent/FindDayTest", 
                params: { 
                    id: id 
                }
            }).then((res) => {
                state.nucleinData = res.data.data
            })

        })

        return {
            table1,
            table2,
            ...toRefs(state),
            temperatureTest,
            nucleinTest,
            exit
        }
    }
})
</script>
  
<style scoped lang="less"> /deep/th {
     background-color: #f9f9f9 !important;
     text-align: center !important;
 }

 /deep/.el-table td.el-table__cell,
 .el-table th.el-table__cell.is-leaf {
     box-sizing: border-box;
     height: 45px;
     text-align: center;
 }

 .container-box {
     box-sizing: border-box;
     width: 100%;
     padding: 50px 20px;
     background-color: white;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 .img {
     border-width: 0px;
     position: absolute;
     right: 0px;
     top: 0px;
     width: 88px;
     height: 109px;
 }

 .text {
     color: white;
     position: absolute;
     top: 32px;
     right: -8px;
     transform: rotate(53deg);
 }

 .title {
     width: 90%;
     display: flex;
     margin-bottom: 60px;

     span {
         width: 15%;
         font-size: 13px;
         cursor: pointer;
     }
 }

 .left {
     float: left;
     width: 50%;
     font-size: 13px;
     color: #333;
 }

 .right {
     float: left;
     width: 50%;
     font-size: 13px;
     color: #333;
 }

 label {
     box-sizing: border-box;
     height: 45px;
     display: inline-block;
     padding: 15px 10px;
 }

 .right label {
     font-weight: 650;
 }

 /* 返回按钮 */
 .exit {
     width: 100%;
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .el-button {
     width: 95px;
     height: 40px;
     font-size: 13px;
 }
</style>